<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <link rel="stylesheet" href="css/orderList.css" type="text/css"/>

</head>
<body>
<!-- 订单克隆模板 -->
<div class="order-sample col-xs-1 col-md-10 show-order-list hidden-attr">
    <div id="order-details-list" class="thumbnail" >
        <div class="caption order-detail-per order-detail-time" style="width: 200px;">
            <h3 id="date">Date</h3>
            <p id="time">Time</p>
        </div>
        <div class="caption order-detail-per order-detail-customer">
            <h3 id="customerName">MerchantName</h3>
            <p>Merchant Addressr</p>
        </div>
        <div class="caption order-detail-per order-detail-order">
            <h3>MoneyTotal</h3>
            <p>total</p>
        </div>
        <div name="status" class="caption order-detail-per order-detail-statu" >
            <h3>OrderStatus</h3>
            <p id="order_status">status</p>
        </div>
        <div class="caption order-detail-per order-detail-order">
            <h3>ProcessNumber</h3>
            <p>number</p>
        </div>
        <div class="btn-group caption order-detail-per order-detail-showdetail">
            <button id="detailBtn" type="button" class="btn btn-primary">Order Detail</button>
        </div>
    </div>
</div>
<div id="main-div">
    <!-- 上方标题-->
    <div class="top-title">
        <div class="dole-logo log-div">
            <a href="">
                <img src="img/login.jpg" alt="Angers">
            </a>
        </div>
        <div class="title-nav">
            <div class="page-header page-header-div">
                <h1>订单列表页</h1>
            </div>
            <div class="admin-center">
                <img src="http://ZHA-ITA077-w7/${customer.avatar}" alt="..." class="img-rounded" height="70" width="70">
                <!-- Split button -->
                <div class="btn-group user-center-btn-group">
                    <button type="button" class="btn btn-primary btn-lg">UserName</button>
                    <button type="button" class="btn btn-primary btn-lg dropdown-toggle  " data-toggle="dropdown"
                            aria-haspopup="true" aria-expanded="false">
                        <span class="caret"></span>
                        <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <ul class="dropdown-menu">
                        <li><a href="#">UserCenter</a></li>
                        <li><a href="#">AddressManager</a></li>
                        <li><a href="#">Change Avater</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Log Out</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 菜单栏-->
    <div class="bottom-menu-operationarea">
        <div id="left-menu-log" class="mac-main-nav menu-div">
            <!--选项栏-->
            <div class="console-menu">
                <ul class="nav nav-pills nav-stacked">
                    <li crole="presentation" class="menu-li"><a href="merchantList.jsp">HomePage</a></li>
                    <li role="presentation" class="menu-li active"><a href="orderList.jsp">Orger Page</a></li>
                </ul>
            </div>
        </div>
        <div class="operationarea">
            <div id="show-order-area">
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="js/dateUtil.js"></script>
<script type="text/javascript">
    (function(){
        var obj={};
        //用来设置ajax回调函数的上下文。让回调函数中的this指向这个对象。
        obj.ajax = function(type, url, data, headers, context, callback){
            $.ajax({
                type: type,
                url: url,
                data: JSON.stringify(data),
                headers: headers,
                context:context
            }).done(callback);
        };
        window.ajaxRequest = obj;
    })();

    function orderListShow(template){
        this.orderTemplate = template;
        this.orderModel = null;
        this.findOrderByStatus = function(status){
            /*添加查询操作,根据spring提供的借口做出修改*/
            ajaxRequest.ajax("GET","showOrders?order_status_id="+status,null,null,this,function(orders){
                this.orderModel = orders;
                _render_order(this.orderTemplate, this.orderModel);
            });
        }

        function bindmenue_operation(li){
            li.on("click",function(){
                ajaxRequest.ajax("PUT","orders/"+$(this).attr("id")+"/"+$(this).text(),null,null,this,function(){
                    $(this).parent().parent().siblings("[name=status]").children("p").text($(this).text());
                });
            });
        }

        function splitData(data){
            var data_after_split = [];
            data.forEach(function(item){
                if(item.createDate != null && item.merchant != null && item.deliveryAddress != null && item.orderItemList != null && item.status !=null && item.processNumber != null)
                    data_after_split.push(item);
            });
            return data_after_split;
        }
        /*渲染orderList*/
        function _render_order(orderTemplate,data){
            var orderTemplateTemp = orderTemplate;
            orderTemplateTemp.empty();
            console.log(data);
            var data_after_split = splitData(data);
            console.log(data_after_split);
            /*添加渲染动作，等模板写好后添加*/
            data_after_split.forEach(function(item){
                console.log(item);
                var clone = $(".order-sample").clone().removeClass("hidden-attr").removeClass("order-sample");
                var childOdClone = clone.children("#order-details-list");
                /*date*/
                childOdClone.children("div:first").children("h3").text();
                /*time*/
                childOdClone.children("div:first").children("p").text(formatDate(new Date(item.createDate)));
                /*merchant name*/
                console.log(item.merchant);
                childOdClone.children("div:nth-child(2)").children("h3").text("商家名称");
                /*merchant address*/
                childOdClone.children("div:nth-child(2)").children("p").text(item.merchant.name);
                /*Money Total*/
                var total = 0;
                item.orderItemList.forEach(function(item){
                    total = total + item.price*item.amount;
                });
                childOdClone.children("div:nth-child(3)").children("h3").text("总价");
                /*Proess Number*/
                childOdClone.children("div:nth-child(3)").children("p").text(total);
                /*Order Statu*/
                childOdClone.children("div:nth-child(4)").children("h3").text("状态");
                childOdClone.children("div:nth-child(4)").children("p").text(item.status).attr("id","status"+item.id);
                /* order processnumber*/
                childOdClone.children("div:nth-child(5)").children("h3").text("订单号");
                childOdClone.children("div:nth-child(5)").children("p").text(item.processNumber);
                /* detail button*/
                childOdClone.children("div:nth-child(6)").children("button:first").attr("id","detailBtn").attr("value", item.id);
                childOdClone.children("div:nth-child(6)")
                        .children("button#detailBtn")
                        .on("click", function(){
                            window.location.href="orderItem?orderId="+$(this).attr("value");
                        });
                childOdClone.children("div:nth-child(6)").children("ul").children("li").attr("id",item.id);
                /* add to dom tree */
                orderTemplateTemp.append(clone);
            });
            bindmenue_operation($(".li_status"));
        }
    };
    $(function(){
        var orderShow = new orderListShow($("#show-order-area"));
        orderShow.findOrderByStatus("ALL");
    });
</script>
</body>
</html>